<template>
  <div>
    <div class="default-box"/>
    <h1 id="login_text">登录/注册</h1>
    <p id="login_text" style="color: rgb(128,128,128);font-weight: bold">可选择邮箱登录</p>
    <div class="default-box"/>
  </div>
  <div id="content">
    <router-view/>
  </div>
  <van-form @submit="onSubmit">
    <!-- 可以使用 CellGroup 作为容器 -->
    <van-cell-group inset>
      <van-field v-model="userAccount"
                 label="账户"
                 size="large"
                 placeholder="请输入账户/邮箱"
                 :rules="[{ required: true, message: '请填写账号' }]"
      />
      <van-field v-model="userPassword"
                 type="password"
                 label="密码"
                 size="large"
                 placeholder="请输入密码"
                 :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div class="default-box"/>
    <van-button id="login_btn" type="primary" color="#475164" round native-type="submit">登录</van-button>
    <div class="small-box"/>
    <van-button id="register_btn" type="primary" color="#475164" round @click="doRegister">注册</van-button>
  </van-form>
</template>
<script setup lang="ts">
import {ref} from "vue";
import myAxios, {INDEX_URL} from "../../plugins/myAxios";
import {Toast} from "vant";
import {useRoute, useRouter} from "vue-router";

const router = useRouter();
const route = useRoute();

const userAccount = ref('');
const userPassword = ref('');

/**
 * 登录接口
 */
const onSubmit = async () => {
  const res = await myAxios.post('/user/login', {
    userAccount: userAccount.value,
    userPassword: userPassword.value
  })
  console.log(res, '用户登录');
  if (res.code === 0 && res.data) {
    window.location.href = INDEX_URL;
    Toast.success('登录成功')
  } else {
    Toast.fail('账号或密码错误！')
  }
};
/**
 * 注册跳转
 */
const doRegister = () => {
  router.push({
    path: "/user/register"
  })
}
</script>

<style scoped>
#login_text {
  padding-left: 24px;
}

#login_btn{
  width: 80vw;
  margin-left: 10%;
}

#register_btn {
  width: 80vw;
  margin-left: 10%;
}
</style>